<template>
	<view style="padding: 10px;">
		<uv-form labelPosition="left" :model="addModel" :rules="rules" ref="addRef">
			<uv-form-item label="标题:" prop="title" borderBottom>
				<uv-input placeholder="请输入标题" v-model="addModel.title" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="内容:" prop="content" borderBottom>
				<uv-textarea placeholder="请输入反馈内容" v-model="addModel.content" border="none">
				</uv-textarea>
			</uv-form-item>
			<uv-button type="primary" text="提交" :customStyle="{marginTop: '10px',background:'#6ECEB0',border:'none'}"
				@click="commit"></uv-button>
		</uv-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {addSuggestionApi} from '../../api/index.js'
	const addRef = ref();
	//表单绑定对象
	const addModel = reactive({
		title: '',
		content: ''
	})
	//表单验证规则
	const rules = reactive({
		'title': {
			type: 'string',
			required: true,
			message: '请填写标题',
			trigger: ['blur', 'change']
		},
		'content': {
			type: 'string',
			required: true,
			message: '请填写简介',
			trigger: ['blur', 'change']
		}
	})
	const commit = async() => {
		addRef.value.validate().then( async(res)=>{
			console.log(res)
			let result = await addSuggestionApi(addModel)
			if(result && result.code == 200){
				uni.navigateBack()
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}
</style>
